<template>
  <!--  添加静态结构 -->
  <div class="container">
    <div class="close">
      <div class="iconfont iconicon-test" @click="$router.back()"></div>
    </div>
    <div class="logo">
      <span class="iconfont iconnew"></span>
    </div>
    <div class="inputs">
      <!-- 使用封装输入框 -->
      <!-- 使用子组件的时候,为子组件复制属性,优先给子组件的props成员赋值,
      如果props中没有对应的设置,那么就直接给组件的根元素赋值 -->
      <!--  使用 v-model 监听值得变化赋值 只能监听input事件 -->
      <!--  添加正则判断输入内容 利用v-bind 监听修改触发事件-->
      <!--  添加动态的显示框提示内容 -->
      <myinp
        placeholder="用户名 / 手机号码"
        :rules="/^1\d{10}$/"
        v-model="user.username"
        msg="账号格式有误"
      />
      <myinp
        placeholder="密码"
        type="password"
        :rules="/^[0-9A-Za-z_]{3,18}$/"
        v-model="user.password"
        msg="密码格式有误"
      />
    </div>
    <p class="tips">
      没有账号？
      <a href="#/register" class="">去注册</a>
    </p>
    <!--  使用封装按钮 -->
    <!--  添加动态输入type值实现不同的样式 -->
    <mybtn @myclick="login" type="danger">登录</mybtn>
    <!-- <van-button type="primary">默认按钮</van-button> -->
  </div>
</template>

<script>
/*  引用组件 */
import mybtn from "@/components/hmbutton.vue";
/*  引用组件 */
import myinp from "@/components/hminput.vue";

/*  引入axios 路径 */
import { userlogin } from "@/apis/user.js";
export default {
  components: {
    // 注册按钮
    mybtn,
    // 注册按钮
    myinp,
    //  "van-button":Button
  },
  methods: {
    /*  使用async标记 , 是异步方法 */
    async login(e) {
      //判断满足正则才进行登录请求
      if (
        /^1\d{10}$/.test(this.user.username) &&
        /^[0-9A-Za-z_]{3,18}$/.test(this.user.password)
      ) {
        try {
          //await : 等待,他可以试想 想等待异步操作组织性完成后再进行后面的代码执行
          //他可以获取then中的回调函数,并返回
          //await必须保证他所在的函数是async函数
          //这两个关键字的组合,没有错误的时候会执行完try结构中的代码块
          let res = await userlogin(this.user);
          // console.log("输出:  ", res);
          if (res.data.statusCode == 200) {
            this.$toast(res.data.message);
            // 见当前用户的信息也存储到本地
            localStorage.setItem(
              "heima-headline-user",
              JSON.stringify(res.data.data.user)
            );
            //将后台返回的token储存到本地存储
            localStorage.setItem("heima-headline", res.data.data.token);

            let hasurl = location.href.split("=")[1]; //存在风险,要是传递的内容是 name=make&age=20 有两个=的键值对时不能使用
            // hasurl = decodeURIComponent(hasurl); //进行解码
            if (hasurl && hasurl !== "undefined") {
              // 利用hash和pathname 都要使用路由跳转  $router.push()

              this.$router.back();
              // location.href = hasurl
            } else {
              this.$router.push({ path: "/mypersonal/" + res.data.data.user.id });
            }
          }
        } catch (err) {
          this.$toast("用户名或密码有误");
        }
      } else {
        this.$toast("用户名或密码有误");
      }
    },
  },
  data() {
    return {
      /*  定义user对象的属性 */
      user: {
        username: "13800138000",
        password: "123456",
      },
    };
  },
};
</script>
<style lang="less" scoped>
/*  添加静态样式 */
.container {
  padding: 20px;
}

.close {
  .iconfont {
    font-size: 27 * 100vw / 360;
  }
}

.logo {
  display: flex;
  justify-content: center;

  span {
    display: block;
    font-size: 126 * 100vw/ 360;
    color: #d81e06;
  }
}

.inputs {
  input {
    margin-bottom: 20px;
  }
}

.tips {
  text-align: right;
  margin-bottom: 20px;

  a {
    color: #3385ff;
  }
}
</style>
